import React from "react";

function Avatar(props) {
  // 不能直接在{}中渲染一个普通对象，会报错
  console.log("Avatar props", props);
  return <div></div>;
}

function Profile() {
  const obj = {
    person: "person",
    size: "size",
    isSepia: "isSepia",
    thickBorder: "thickBorder",
  };

  return (
    <div className="card">
      {/* <Avatar
        person={obj.person}
        size={obj.size}
        isSepia={obj.isSepia}
        thickBorder={obj.thickBorder}
      /> */}

      <Avatar {...obj} />
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>

        <Profile />
      </div>
    );
  }
}

export default App;
